<template>
  <div>
    <van-nav-bar
      title="入驻商家"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div style="width: 90%; margin: 0 auto; position: relative; ">
      <!-- <div style="height: 40px; line-height: 40px; font-size: 25px; text-align: center;">注册</div> -->
      <!-- 商家名称 -->
      <van-field v-model="shop.shopName" clearable label="商家名称:" placeholder="请输入商家名称" style="margin-top: 10px;" />
      <!-- 商家类型 -->
      <van-field
        readonly
        clickable
        label="商家类型"
        :value="value1"
        placeholder="选择商家类型"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm1"
        />
      </van-popup>
      <!-- 地区 -->
      <van-field
        readonly
        clickable
        name="area"
        :value="shop.shopAddress"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm2"
          @cancel="showArea = false"
        />
      </van-popup>
      <!-- 商家详细地址 -->
      <van-field v-model="value" clearable label="详细地址:" placeholder="请输入详细地址" style="margin-top: 10px;" />

      <van-row>
        <van-col span="6"  style="display: flex;justify-content: center;align-items: center;height: 80px;">
          <div><span style="font-size: 14px;">商品图片:</span></div>
        </van-col>
        <van-col span="2">
          
        </van-col>
        <van-col span="14">
          <van-uploader action="item/uploadImg" name="file" :after-read="afterRead" v-model="fileList" multiple :max-count="1" />
        </van-col>
      </van-row>
      
      <!-- 手机号 -->
      <van-field v-model="shop.shopPhone" clearable label="手机号:" placeholder="请输入手机号" style="margin-top: 10px;" />

      <!-- 验证码 -->
      <van-field
      style="margin-top: 10px;"
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button v-if="!countDown" size="small" type="primary" @click="sendSms">发送验证码</van-button>
          <van-button v-else size="small" disabled>{{ countDown }} 秒后重试</van-button>
        </template>
      </van-field>

      <van-checkbox v-model="checked" shape="square" style="margin-top: 20px;">我已阅读并同意《爱尚商家协议》</van-checkbox>

      <van-button @click="onClick()" type="primary" block style="border-radius: 5px; color: black; background-color: #ffdd00; border-color: #ffdd00; width: 80%; margin: 0 auto; margin-top: 20px; ">
        注册
      </van-button>
      
      <!-- 注册弹出层 -->
      <van-dialog class="fixed-dialog" v-model="show" title="美团商家协议" @confirm="onConfirm()">
        <van-cell-group inset class="refund">
          <van-cell>
            <p>商家信息：商家的名称、地址、联系方式等基本信息。</p>
            
            <p>服务内容：明确商家提供的服务或商品内容，包括价格、品质、数量等。</p>

            <p>权益保障：商家在合作过程中的权益保障，包括价格调整、商品质量保证、退款、投诉处理等。</p>
            
            <p>结算方式：商家与爱尚之间的结算方式和周期，包括结算金额、结算时间等。</p>
            
            <p>促销活动：商家与爱尚合作的促销活动，包括折扣、优惠券、满减等。</p>
            
            <p>违约责任：商家和爱尚在合作过程中的违约责任和补偿方式。</p>
            
            <p>保密条款：商家与爱尚之间的商业机密和用户隐私的保密责任。</p>
            
            <p>争议解决：商家和爱尚之间的争议解决方式，包括仲裁、诉讼等。</p>
          </van-cell>
        </van-cell-group>
      </van-dialog>


    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import { Toast } from 'vant';
import axios from 'axios';
export default {
  name: 'BusinessRegister',
  data(){
    return{
      //文件
      fileList:[],
      // 商家信息
      shop:{
        shopName:'',
        shopTypesId:0,
        shopAddress:"",
        shopImg:'',
        uid:this.$store.state.uid,
        shopPhone:''
      },
      shopAddress:"",
      countDown: 0, // 倒计时秒数
      value:'',
      sms:'',
      checked:false,
      show:false,
      value1: '',
      showPicker: false,
      columns: ['美食', '甜点饮品', '超市 便利 ', '生鲜果蔬', '看病买药', '晚餐优选', '天天神券',
       '跑腿', '拼好饭', '汉堡披萨', '小吃馆', '鲜花蛋糕', '鸭脖卤味', '龙虾烧烤', '异国料理'],
      value2: '',
      showArea: false,
      areaList,
    };
  },
  methods:{
    onClickLeft(){
      // 后退一步
      this.$router.go(-1);
    },
    
    onClick(){
      if(!this.checked==true){
        this.show = true;
      }else{ // 注册登录
        this.shop.shopAddress = this.shop.shopAddress + this.value
        console.log(this.shop);
        axios.defaults.headers['Content-type'] = 'application/x-www-form-urlencoded;charset=utf-8';
        axios.post(`/api/shop/registerShop`,this.shop)
        .then( res =>{
          console.log(res.data);
          if (res.data.code === 200) {
            
            this.$router.push({path:'/Mine'})
            sessionStorage.removeItem("code")
          } else{
            Toast("该手机号已注册了")
          }
        }) 
        .catch( err => {
          console.log(err);
        })
      }
    },
    sendSms() {
      if(this.shop.shopPhone === ""){
        Toast("手机号不能为空！！");
        return;
      }
      // 发送验证码操作
      axios.defaults.headers['Content-type'] = 'application/x-www-form-urlencoded;charset=utf-8';
        axios.post(`/api/send?Phone=${this.shop.shopPhone}`)
        .then( res =>{
          console.log(res);
          if (res.data.code === 200) {
            //将验证码保存到本地存储
            sessionStorage.setItem("code", res.data.data);
          } else{
            console.log("发送失败");
          } 
        }) 
        .catch( err => {
          console.log(err);
        })

      // 启动计时器
      this.countDown = 60
      const timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--
        } else {
          clearInterval(timer)
        }
      }, 1000)
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      
      //文件上传必须写通过formData对象
      const fromData = new FormData()
      fromData.append("file",file.file)
      //需要设置请求头为文件上传的form-data
      axios.post("/api/shop/uploadImg",fromData,{
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then(result =>{
        //复制图片
        this.shop.shopImg = result.data.data
        console.log(result.data);
      })
      console.log(file);
    },
    onConfirm2(values) {
      let address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('');
        this.shop.shopAddress = address
      this.showArea = false;
    },
    onConfirm1(value,index) {
      this.shop.shopTypesId = index + 1
      console.log(index);
      this.value1 = value;
      this.showPicker = false;
    },
   
    onConfirm(){
      this.checked = true;
    },
    
  },
  created(){
    
  }
}
</script>
  
<style scoped>
*{
  margin: 0;
  padding: 0;
}
.van-button{
  background-color: #F1F3F4;
  color: black;
  border-color: #F1F3F4;
}
.van-field__label{
  text-align: center;
}
.fixed-dialog{
  width: 320px; /* 设置宽度 */
  height: 460px; /* 设置高度 */
  max-height: 460px; /* 设置最大高度 */
  overflow-y: auto; /* 设置垂直滚动 */
}
</style>
